<template>
  <el-dialog title="选择业务员" :visible.sync="dialogVisible" :before-close="handleClose" :width="width">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" :label-width="styleOptions.labelWidth">
      <el-form-item v-if="!disabledSearchFieldList.includes('principalPhone')" label="手机号" prop="principalPhone">
        <el-input v-model="queryParams.principalPhone" placeholder="请输入手机号" clearable :style="styleOptions.inputStyle"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item v-if="!disabledSearchFieldList.includes('nickName')" label="姓名" prop="nickName">
        <el-input v-model="queryParams.nickName" placeholder="姓名" clearable :style="styleOptions.inputStyle"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div style="padding: 10px 20px;border: 1px solid #ccc;display: flex;align-items: center; margin-bottom: 20px"
      v-if="selectUsers.length > 0">
      <div style="white-space: nowrap;font-size: 20px;font-weight: bold;margin-right: 30px">
        <span>已选择的用户：</span>
      </div>
      <div style="gap: 30px;flex-wrap: wrap;display: flex;align-items: center;">
        <div style="" v-for="(item, index) in selectUsers" :key="item.userId">
          <span>{{ item.nickName }}</span>
          <i style="margin-left: 5px;cursor: pointer;color:red;" @click="deteleItem(index)" class="el-icon-close"></i>
        </div>
      </div>
    </div>

    <el-table v-loading="loading" :data="nameList" ref="multipleTable">
      <el-table-column width="50" label="ID" align="center" key="userId" prop="userId" />
      <el-table-column label="姓名" align="center" key="nickName" prop="nickName" :show-overflow-tooltip="true" />
      <el-table-column fixed="right" align="center" label="操作" width="100">
        <template slot-scope="scope">
          <el-button :disabled="ids.includes(scope.row.userId)" v-if="multiple" @click="addItem(scope.row)" type="text"
            size="small">添加</el-button>
          <el-button v-else @click="selectItem(scope.row)" type="text" size="small">选择</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <span slot="footer" class="dialog-footer" v-if="multiple">
      <el-button type="primary" v-if="styleOptions.btnAlign" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" v-if="!styleOptions.btnAlign" @click="handleSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { listUser } from "@/api/system/user";
import { userTypeList } from "@/configEnum";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: true,
    },
    // 已选择的用户
    defauleUser: {
      type: Array,
      default: () => [],
    },
    // 禁用的搜索字段
    disabledSearchFieldList: {
      type: Array,
      default: () => []
    },
    width: {
      type: String,
      default: "500px",
    },
    styleOptions:{
      type:Object,
      default:()=>{
        return {
          btnAlign:false,
          inputStyle:{
            width:'240px'
          },
          labelWidth:'68px'
        }
      }
    }
  },
  data() {
    return {
      userTypeList,
      loading: false,
      queryParams: {
        principalPhone: undefined,
        userName: undefined,
        pageNum: 1,
        pageSize: 5,
      },
      total: 0,
      nameList: [],
      multipleSelection: [],
      selectUsers: []
    };
  },
  computed: {
    ids() {
      return this.selectUsers.map(item => item.userId)
    }
  },
  methods: {
    selectItem(row) {
      this.$emit("onSubmit", row);
      this.handleClose();
    },
    deteleItem(index) {
      this.selectUsers.splice(index, 1)
    },
    addItem(row) {
      if (this.ids.includes(row.userId)) {
        this.$message.error('改用户已被添加!');
      } else {
        this.selectUsers.push(row)
      }
    },
    handleSelect(selection, row) {
      this.rowData = row
      // 清除 所有勾选项
      this.$refs.multipleTable.clearSelection();
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return;
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
    handleSubmit() {
      this.$emit("onSubmit", this.selectUsers);
      this.handleClose();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleClose() {
      this.$emit("onClose");
    },
    handleQuery() {
      this.getList();
    },
    getList() {
      this.loading = true;
      listUser({
        userType: 1,
        roleCodeList: 'business_role',
        ...this.queryParams
      }).then((res) => {
        this.nameList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
  },
  watch: {
    dialogVisible(newValue, oldValue) {
      if (newValue) {
        this.multipleSelection = [];
        this.selectUsers = JSON.parse(JSON.stringify(this.defauleUser));
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
